import 'package:flutter/material.dart';
import '../definitions/color.dart';
import '../model/pin_yin.dart';
import 'focus_manage/focus_widget.dart';

class LetterIndexCard extends StatefulWidget {
  final LetterInfo letter;
  final FocusNode focusNode;
  final bool? autofocus;
  final void Function()? onConfirm;

  LetterIndexCard({
    super.key,
    required this.letter,
    this.autofocus,
    this.onConfirm,
    FocusNode? focusNode,
  }) : focusNode = focusNode ?? FocusNode();

  @override
  State<LetterIndexCard> createState() => _LetterIndexCardState();
}

class _LetterIndexCardState extends State<LetterIndexCard> {
  @override
  Widget build(BuildContext context) {
    bool showFocusStatus = widget.focusNode.hasFocus;
    return FocusWidget(
        focusNode: widget.focusNode,
        autofocus: widget.autofocus,
        onConfirm: widget.onConfirm,
        onFocusChange: (bool value) {
          setState(() {});
        },
        child: Container(
          width: 48 + (widget.letter.value.length / 3).ceil() * 18,
          height: 36,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
              border: Border.all(
                  color: showFocusStatus
                      ? SchemeColor.seedColor.value
                      : Colors.white30)),
          child: Center(
            child: Text(
              widget.letter.value.toString(),
              style: TextStyle(
                fontFamily: 'PinYin',
                height: 1,
                fontSize: 18,
                fontWeight: showFocusStatus ? FontWeight.bold : null,
                color: showFocusStatus ? SchemeColor.seedColor.value : null,
              ),
            ),
          ),
        ));
  }
}
